<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/common.css">

    <style>
        .item {
            height: 60px;
            border-bottom: 1px solid #ebebee;
        }
        
        .del {
            right: 0;
            top: 0;
            height: 50px;
            width: 100px;
            background-color: red;
            color: #fff;
        }
        
        img {
            height: 50px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
</head>

<body>
    <header>
        <a href="./list.html">列表</a>
        <a href="./add.html">添加</a>
    </header>
    <ul class="mt-5 flex2">
        
    </ul>
    <script>
        var obj={
            getList:function(){
                var self=this
                $.ajax({
                    url:'http://localhost:8880/getList',
                    type: 'get',
                    dataType:'json',
                    success:function(res){
                        if(res.code==666){
                            self.render(res.data)
                        }
                    },
                    error:function(error){
                        console.log(error)
                    }
                })
            },
            render:function(list){
                var str='';
                list.forEach((itme,index) => {
                    str+=`
                    <li class="bg-fff item flex jc-sb pl-15 pr-15 aic f16 rel">
                        <img src="${itme.headUrl?itme.headUrl:'https:img1.baidu.com/it/u=1604791981,1389364188&fm=26&fmt=auto&gp=0.jpg'}" alt="">
                        <div class="fg1 ml-5">
                            <span class="f20">${itme.name}</span>
                            <p class="f999 f14 mt-5">${itme.age}</p>
                        </div>
                        <a href="./detail.html?id=${itme._id}">详情</a>
                    </li>
                    `
                });
                $('ul').html(str)
            }
        }
        obj.getList()
    </script>
</body>

</html>